<template>
    <div class="video-detail-container">
        <div class="main-content container">
            <!-- 主要内容区域 -->
            <div class="content-layout">
                <!-- 左侧视频播放区域 -->
                <div class="video-player-column">
                    <div class="player-wrapper">
                        <div id="player" class="player-container">
                            <video ref="videoPlayer" :src="video.videoUrl" controls @timeupdate="onTimeUpdate"></video>
                            <div v-if="activeTimePoint !== null" class="time-indicator">
                                <el-icon>
                                    <VideoPlay />
                                </el-icon>
                                审核点位: {{ formatTime(activeTimePoint) }}
                            </div>
                        </div>
                    </div>

                    <!-- 审核操作卡片 -->
                    <div class="info-card action-card">
                        <div class="status-section">
                            <div class="status-card" :class="getStatusCardClass(video.status)">
                                <div class="status-icon">
                                    <i class="iconfont" :class="getStatusIconClass(video.status)"></i>
                                </div>
                                <div class="status-info">
                                    <div class="status-title">{{ getVideoStatusText(video.status) }}</div>
                                    <div class="status-desc">{{ getVideoStatusDesc(video.status) }}</div>
                                </div>
                            </div>

                            <!-- 添加详细审核状态信息 -->
                            <div class="audit-status-details"
                                v-if="video.textAuditStatus !== undefined || video.imageAuditStatus !== undefined || video.videoAuditStatus !== undefined">
                                <div class="audit-status-header">详细审核状态：</div>
                                <div class="audit-status-items">
                                    <div class="audit-status-item" v-if="video.textAuditStatus !== undefined">
                                        <span class="audit-type-label">文本审核：</span>
                                        <span class="audit-status-badge" :class="getStatusClass(video.textAuditStatus)">
                                            {{ getStatusText(video.textAuditStatus) }}
                                        </span>
                                    </div>
                                    <div class="audit-status-item" v-if="video.imageAuditStatus !== undefined">
                                        <span class="audit-type-label">图片审核：</span>
                                        <span class="audit-status-badge"
                                            :class="getStatusClass(video.imageAuditStatus)">
                                            {{ getStatusText(video.imageAuditStatus) }}
                                        </span>
                                    </div>
                                    <div class="audit-status-item" v-if="video.videoAuditStatus !== undefined">
                                        <span class="audit-type-label">视频审核：</span>
                                        <span class="audit-status-badge"
                                            :class="getStatusClass(video.videoAuditStatus)">
                                            {{ getStatusText(video.videoAuditStatus) }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="action-buttons">
                            <el-button type="success" class="action-button approve-button"
                                @click="updateVideoStatus(1)">
                                <el-icon>
                                    <Check />
                                </el-icon>
                                通过审核
                            </el-button>
                            <el-button type="warning" class="action-button reject-button" @click="updateVideoStatus(2)">
                                <el-icon>
                                    <Close />
                                </el-icon>
                                不予过审
                            </el-button>
                            <el-button type="danger" class="action-button delete-button" @click="beforeDelete">
                                <el-icon>
                                    <Delete />
                                </el-icon>
                                永久删除
                            </el-button>
                        </div>
                    </div>
                </div>

                <!-- 右侧视频信息区域 -->
                <div class="video-info-column">
                    <!-- 视频基本信息卡片 -->
                    <div class="info-card video-info">
                        <div class="info-header">
                            <h2 class="video-title">{{ video.title || '无标题视频' }}</h2>
                            <div class="meta-info">
                                <div class="upload-time" v-if="video.uploadTime">
                                    <el-icon>
                                        <Calendar />
                                    </el-icon>
                                    <span>上传时间: {{ formatDate(video.uploadTime) }}</span>
                                </div>
                                <div class="view-count" v-if="video.views !== undefined">
                                    <el-icon>
                                        <View />
                                    </el-icon>
                                    <span>浏览量: {{ video.views || 0 }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="info-content">
                            <div class="info-row">
                                <div class="info-label">类型</div>
                                <div class="info-value">
                                    <el-tag size="small" effect="plain"
                                        :type="video.type === 1 ? 'success' : 'warning'">
                                        {{ video.type === 1 ? '自制' : '转载' }}
                                    </el-tag>
                                    <div class="auth-tag" v-if="video.type === 1 && video.auth === 1">
                                        <i class="iconfont icon-jinzhi"></i>
                                        <span>未经授权 禁止转载</span>
                                    </div>
                                </div>
                            </div>

                            <div class="info-row">
                                <div class="info-label">分区</div>
                                <div class="info-value category-path">
                                    <el-tag size="small" type="info" effect="plain">{{ category.mcName || '未分类'
                                    }}</el-tag>
                                    <el-icon>
                                        <ArrowRight />
                                    </el-icon>
                                    <el-tag size="small" type="info" effect="plain">{{ category.scName || '未分类'
                                    }}</el-tag>
                                </div>
                            </div>

                            <div class="info-row">
                                <div class="info-label">标签</div>
                                <div class="info-value tags-container">
                                    <el-tag v-for="(item, index) in tags" :key="index" class="tag-item" effect="light"
                                        size="small">
                                        {{ item }}
                                    </el-tag>
                                    <div class="no-tags" v-if="!tags || tags.length === 0">无标签</div>
                                </div>
                            </div>

                            <div class="info-row description-row">
                                <div class="info-label">简介</div>
                                <div class="info-value">
                                    <div class="description-content" v-html="formatText(video.descr || '无简介')"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 审核状态概览卡片 -->
                    <div class="info-card audit-overview">
                        <div class="card-header">
                            <h3 class="card-title">
                                <el-icon>
                                    <Document />
                                </el-icon>
                                审核状态概览
                            </h3>
                        </div>
                        <div class="audit-overview-content">
                            <el-empty v-if="!auditResults || auditResults.length === 0" description="暂无审核数据"></el-empty>
                            <div v-else class="audit-status-list">
                                <div class="audit-status-item" v-for="(item, index) in auditResults" :key="index"
                                    @click="activeTabIndex = index">
                                    <div class="audit-type">
                                        <div class="audit-type-icon" :class="getAuditTypeIcon(item.type)"></div>
                                        <span>{{ getAuditTypeName(item.type) }}</span>
                                    </div>
                                    <div class="audit-status-badge" :class="getStatusClass(item.status)">
                                        {{ getStatusText(item.status) }}
                                    </div>
                                    <div class="audit-time">{{ item.auditTime }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 审核结果详情部分 -->
            <div class="audit-detail-section">
                <div class="info-card audit-detail-card" v-if="auditResults.length > 0">
                    <div class="card-header">
                        <h3 class="card-title">
                            <el-icon>
                                <List />
                            </el-icon>
                            内容审核详情
                        </h3>
                    </div>

                    <!-- 自定义审核类型切换组件 -->
                    <div class="audit-tabs">
                        <div class="audit-tab-header">
                            <div v-for="(item, index) in auditResults" :key="index"
                                :class="['audit-tab-item', { active: activeTabIndex === index }]"
                                @click="activeTabIndex = index">
                                <div class="tab-icon" :class="getAuditTypeIcon(item.type)"></div>
                                <span class="tab-text">{{ getAuditTypeName(item.type) }}</span>
                                <div class="tab-status-dot" :class="getStatusClass(item.status)"></div>
                            </div>
                        </div>

                        <div class="audit-tab-content">
                            <div v-for="(item, index) in auditResults" :key="index" v-show="activeTabIndex === index"
                                class="audit-content-panel">
                                <div class="audit-panel-header">
                                    <div class="audit-type">{{ getAuditTypeName(item.type) }}</div>
                                    <div class="audit-status-badge large" :class="getStatusClass(item.status)">
                                        {{ getStatusText(item.status) }}
                                    </div>
                                </div>

                                <div class="audit-panel-content">
                                    <div class="audit-info-card">
                                        <div class="audit-info-item">
                                            <span class="audit-info-label">审核结果：</span>
                                            <span class="audit-info-value">{{ item.reason || '无' }}</span>
                                        </div>
                                        <div class="audit-info-item">
                                            <span class="audit-info-label">审核时间：</span>
                                            <span class="audit-info-value">{{ item.auditTime }}</span>
                                        </div>
                                        <div class="audit-info-item" v-if="item.reviewTime">
                                            <span class="audit-info-label">人工审核时间：</span>
                                            <span class="audit-info-value">{{ item.reviewTime }}</span>
                                        </div>
                                    </div>

                                    <!-- 视频帧审核结果 -->
                                    <div v-if="item.type === 3 && item.details && item.details.length > 0"
                                        class="video-frames-section">
                                        <div class="section-title">
                                            <el-icon>
                                                <VideoCamera />
                                            </el-icon>
                                            视频帧审核结果
                                        </div>

                                        <!-- 审核总结信息 -->
                                        <div class="audit-summary" v-if="hasSummaryDetails(item.details)">
                                            <div class="summary-title">审核总结:</div>
                                            <div class="summary-content">
                                                <div v-for="(detail, idx) in getSummaryDetails(item.details)"
                                                    :key="'summary-' + idx" class="summary-item">
                                                    <div class="summary-type">{{ detail.type }}</div>
                                                    <div class="summary-message">{{ formatSummaryContent(detail.content)
                                                        }}</div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="frames-filter-bar">
                                            <el-radio-group v-model="frameFilter" size="small">
                                                <el-radio-button label="all">全部帧</el-radio-button>
                                                <el-radio-button label="violation">违规帧</el-radio-button>
                                                <el-radio-button label="normal">合规帧</el-radio-button>
                                            </el-radio-group>
                                            <div class="filter-info">
                                                显示 {{ filteredFrames(item.details).length }} / {{ item.details.length }}
                                                帧
                                            </div>
                                        </div>

                                        <div class="video-frames-grid">
                                            <div v-for="(detail, detailIndex) in filteredFrames(item.details)"
                                                :key="detailIndex" class="video-frame-card"
                                                @click="showFramePreview(detail)">
                                                <div class="frame-thumbnail">
                                                    <img :src="extractImageUrl(detail.content)"
                                                        :alt="'帧 ' + detailIndex">
                                                    <div class="frame-actions">
                                                        <el-button type="primary" size="small" circle
                                                            @click.stop="jumpToTimePoint(detail)">
                                                            <el-icon>
                                                                <VideoPlay />
                                                            </el-icon>
                                                        </el-button>
                                                        <el-button type="info" size="small" circle
                                                            @click.stop="showFramePreview(detail)">
                                                            <el-icon>
                                                                <ZoomIn />
                                                            </el-icon>
                                                        </el-button>
                                                    </div>
                                                </div>
                                                <div class="frame-info">
                                                    <div class="frame-time">{{ extractDetailedTime(detail.location) }}秒
                                                    </div>
                                                    <div class="frame-result-badge"
                                                        :class="isFrameViolation(detail) ? 'status-violation' : 'status-pass'">
                                                        {{ detail.subType }}
                                                    </div>
                                                    <div v-if="isFrameViolation(detail) && detail.content && detail.content.includes('涉及人物')"
                                                        class="frame-violation-info">
                                                        {{ extractPersonInfo(detail.content) }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 审核操作按钮 -->
                                    <div class="audit-action-buttons" v-if="item.status === 2 || item.status === 3">
                                        <el-button type="success" @click="manualReview(item.id, true)">
                                            <el-icon>
                                                <Check />
                                            </el-icon>
                                            审核通过
                                        </el-button>
                                        <el-button type="danger" @click="openRejectDialog(item.id)">
                                            <el-icon>
                                                <Close />
                                            </el-icon>
                                            审核拒绝
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="info-card empty-audit-card" v-else>
                    <el-empty description="暂无内容审核数据" :image-size="200">
                        <template #description>
                            <p>系统尚未对该视频进行内容审核，或审核过程尚未完成</p>
                        </template>
                        <el-button type="primary" @click="getAuditResults">刷新审核数据</el-button>
                    </el-empty>
                </div>
            </div>
        </div>
    </div>

    <!-- 大图预览对话框 -->
    <el-dialog v-model="imagePreviewVisible" title="视频帧预览" width="70%" center destroy-on-close
        class="frame-preview-dialog">
        <div class="image-preview-container">
            <img :src="previewImageUrl" class="preview-image">
        </div>
        <div class="preview-info" v-if="previewFrameInfo">
            <div class="preview-location">{{ previewFrameInfo.location }}</div>
            <div class="preview-result" :class="previewFrameInfo.subType === '合规' ? 'status-pass' : 'status-violation'">
                {{ previewFrameInfo.subType }}
            </div>
            <el-button type="primary" @click="jumpToTimePointAndClosePreview" class="preview-action-button">
                <el-icon>
                    <VideoPlay />
                </el-icon>
                跳转到视频时间点
            </el-button>
        </div>
    </el-dialog>

    <!-- 审核拒绝原因对话框 -->
    <el-dialog v-model="rejectDialogVisible" title="输入审核不通过原因" width="30%" destroy-on-close class="reject-dialog">
        <div class="reject-dialog-content">
            <p class="dialog-tip">请输入审核不通过的原因，此信息将通知给用户：</p>
            <el-input v-model="rejectReason" type="textarea" :rows="4" placeholder="例如：视频内容含有不适当画面，违反相关规定" />
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="rejectDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitReject">确认拒绝</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { linkify } from '@/utils/utils.js';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ArrowRight, Calendar, Check, Close, Delete, Document, List, VideoCamera, VideoPlay, View, ZoomIn } from '@element-plus/icons-vue';

export default {
    name: "VideoDetail",
    components: {
        ArrowRight, Calendar, Check, Close, Delete, Document, List, VideoCamera, VideoPlay, View, ZoomIn
    },
    data() {
        return {
            video: {},  // 视频信息
            user: {},   // 投稿用户信息
            category: {},   // 视频分区信息
            tags: [],   // 投稿标签
            isMiniWidth: false, // 判断是否小窗
            auditResults: [], // 审核结果列表
            rejectDialogVisible: false, // 审核拒绝对话框
            rejectReason: '', // 审核拒绝原因
            currentAuditId: null, // 当前操作的审核ID
            imagePreviewVisible: false, // 图片预览对话框
            previewImageUrl: '', // 预览图片URL
            previewFrameInfo: null, // 当前预览的帧信息
            activeTimePoint: null, // 当前激活的时间点
            activeTabIndex: 0, // 当前激活的选项卡索引
            isLoading: false, // 加载状态
            frameFilter: 'all', // 新增帧过滤选项
        }
    },
    methods: {
        // 格式化日期时间
        formatDate(timestamp) {
            if (!timestamp) return '未知';
            const date = new Date(timestamp);
            return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
        },

        // 获取审核类型图标
        getAuditTypeIcon(type) {
            const iconMap = {
                1: 'icon-text',
                2: 'icon-image',
                3: 'icon-video'
            };
            return iconMap[type] || '';
        },

        // 获取视频状态文本
        getVideoStatusText(status) {
            const statusMap = {
                0: '待审核',
                1: '已通过',
                2: '未通过',
                3: '已删除'
            };
            return statusMap[status] || '未知状态';
        },

        // 获取视频状态描述
        getVideoStatusDesc(status) {
            const descMap = {
                0: '该内容正在等待审核',
                1: '内容已审核通过',
                2: '内容未通过审核',
                3: '内容已被删除'
            };
            return descMap[status] || '未知状态';
        },

        // 获取视频状态类名
        getVideoStatusClass(status) {
            const classMap = {
                0: 'status-pending',
                1: 'status-success',
                2: 'status-rejected',
                3: 'status-deleted'
            };
            return classMap[status] || '';
        },

        // 获取状态卡片类名
        getStatusCardClass(status) {
            const classMap = {
                0: 'pending',
                1: 'success',
                2: 'fail',
                3: 'deleted'
            };
            return classMap[status] || '';
        },

        // 获取状态图标类名
        getStatusIconClass(status) {
            const iconMap = {
                0: 'icon-shenhezhong',
                1: 'icon-wancheng',
                2: 'icon-shibai',
                3: 'icon-shanchu'
            };
            return iconMap[status] || '';
        },

        // 显示帧预览
        showFramePreview(detail) {
            this.previewImageUrl = this.extractImageUrl(detail.content);
            this.previewFrameInfo = detail;
            this.imagePreviewVisible = true;
        },

        // 跳转到时间点并关闭预览
        jumpToTimePointAndClosePreview() {
            if (this.previewFrameInfo) {
                this.jumpToTimePoint(this.previewFrameInfo);
                this.imagePreviewVisible = false;
            }
        },

        // 获取视频详细信息
        async getVideoDetail() {
            this.isLoading = true;
            try {
                const res = await this.$get('/review/video/getone', {
                    params: {
                        vid: this.$route.params.vid,
                    },
                    headers: {
                        Authorization: "Bearer " + localStorage.getItem("teri_token"),
                    },
                });
                if (res.data.data) {
                    // 更新数据
                    this.video = res.data.data.video;
                    this.user = res.data.data.user;
                    this.category = res.data.data.category;

                    // 处理标签
                    if (this.video.tags) {
                        this.tags = this.video.tags.split("\r\n")
                            .filter(tag => tag.trim() !== "")
                            .map(tag => tag.trim());
                    } else {
                        this.tags = [];
                    }

                    // 获取内容审核结果
                    this.getAuditResults();
                }
            } catch (error) {
                console.error("获取视频详情失败:", error);
                ElMessage.error('获取视频详情失败');
            } finally {
                this.isLoading = false;
            }
        },

        // 获取审核内容
        async getAuditResults() {
            this.isLoading = true;
            try {
                const res = await this.$get(`/admin/audit/video/${this.$route.params.vid}`, {
                    headers: {
                        Authorization: "Bearer " + localStorage.getItem("teri_token"),
                    },
                });

                if (res.data.code === 0 || res.data.code === 200) {
                    this.auditResults = res.data.data.auditResults || [];

                    // 更新视频对象中的审核状态
                    if (this.video && res.data.data.video) {
                        // 确保从后端获取最新的审核状态
                        this.video.textAuditStatus = res.data.data.video.textAuditStatus;
                        this.video.imageAuditStatus = res.data.data.video.imageAuditStatus;
                        this.video.videoAuditStatus = res.data.data.video.videoAuditStatus;
                    }

                    // 为每个审核结果排序详情并进行安全处理
                    this.auditResults.forEach(item => {
                        if (item.details && item.details.length > 0) {
                            // 确保subType和type字段的安全访问
                            item.details.forEach(detail => {
                                if (detail.subType === undefined || detail.subType === null) {
                                    detail.subType = "未知类型";
                                }
                                if (detail.type === undefined || detail.type === null) {
                                    detail.type = "未知内容";
                                }
                                // 确保其他字段存在
                                if (!detail.content) detail.content = "";
                                if (!detail.location) detail.location = "";
                            });

                            // 如果是视频审核，尝试按时间点排序
                            if (item.type === 3) {
                                item.details.sort((a, b) => {
                                    const timeA = this.extractTimePoint(a.location) || 0;
                                    const timeB = this.extractTimePoint(b.location) || 0;
                                    return timeA - timeB;
                                });
                            }
                        }
                    });

                    // 更新视频审核状态信息
                    this.updateVideoAuditStatus();
                }
            } catch (error) {
                console.error("获取审核结果失败:", error);
                ElMessage.error('获取审核结果失败');
            } finally {
                this.isLoading = false;
            }
        },

        // 新增方法：更新视频审核状态
        updateVideoAuditStatus() {
            if (!this.auditResults || this.auditResults.length === 0) return;

            // 查找每种类型的审核结果
            const textAudit = this.auditResults.find(item => item.type === 1);
            const imageAudit = this.auditResults.find(item => item.type === 2);
            const videoAudit = this.auditResults.find(item => item.type === 3);

            // 更新对应的状态
            if (textAudit && this.video) {
                this.video.textAuditStatus = textAudit.status;
            }
            if (imageAudit && this.video) {
                this.video.imageAuditStatus = imageAudit.status;
            }
            if (videoAudit && this.video) {
                this.video.videoAuditStatus = videoAudit.status;
            }
        },

        // 从位置信息中提取时间点
        extractTimePoint(location) {
            if (!location) return null;
            const timeMatch = location.match(/时间点: (\d+\.\d+)秒/);
            return timeMatch ? parseFloat(timeMatch[1]) : null;
        },

        // 从内容中提取图片URL
        extractImageUrl(content) {
            if (!content) return '';
            const match = content.match(/缩略图: (http[^\s\n]+)/);
            return match ? match[1] : '';
        },

        // 跳转到视频特定时间点
        jumpToTimePoint(detail) {
            if (!detail || !detail.location) return;

            // 从位置信息中提取时间
            const timePoint = this.extractTimePoint(detail.location);
            if (timePoint !== null) {
                this.activeTimePoint = timePoint;

                // 设置视频播放器时间
                if (this.$refs.videoPlayer) {
                    this.$refs.videoPlayer.currentTime = timePoint;
                    this.$refs.videoPlayer.play();

                    // 确保视频播放器在视口内
                    const playerElement = document.getElementById('player');
                    if (playerElement) {
                        playerElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    }
                }

                // 5秒后清除时间点指示器
                setTimeout(() => {
                    if (this.activeTimePoint === timePoint) {
                        this.activeTimePoint = null;
                    }
                }, 5000);
            }
        },

        // 视频播放时间更新
        onTimeUpdate() {
            // 如果没有激活的时间点，不做处理
            if (this.activeTimePoint === null) return;

            // 如果当前播放时间与激活时间点相差超过2秒，清除激活时间点
            const currentTime = this.$refs.videoPlayer.currentTime;
            if (Math.abs(currentTime - this.activeTimePoint) > 2) {
                this.activeTimePoint = null;
            }
        },

        // 格式化时间为分:秒格式
        formatTime(seconds) {
            if (seconds === null || seconds === undefined) return '--:--';
            const mins = Math.floor(seconds / 60);
            const secs = Math.floor(seconds % 60);
            return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
        },

        // 进行人工审核
        async manualReview(auditId, pass) {
            if (pass) {
                try {
                    this.isLoading = true;
                    const formData = new FormData();
                    formData.append('auditId', auditId);
                    formData.append('pass', true);
                    formData.append('reason', '管理员审核通过');

                    const res = await this.$post('/admin/audit/review', formData, {
                        headers: {
                            Authorization: "Bearer " + localStorage.getItem("teri_token"),
                        }
                    });

                    if (res.data.code === 0 || res.data.code === 200) {
                        ElMessage.success('审核已通过');
                        this.getAuditResults(); // 刷新审核结果
                    } else {
                        ElMessage.error(res.data.message || '操作失败');
                    }
                } catch (error) {
                    console.error("审核操作失败:", error);
                    ElMessage.error('审核操作失败');
                } finally {
                    this.isLoading = false;
                }
            } else {
                this.currentAuditId = auditId;
                this.rejectDialogVisible = true;
            }
        },

        // 打开拒绝对话框
        openRejectDialog(auditId) {
            this.currentAuditId = auditId;
            this.rejectReason = '';
            this.rejectDialogVisible = true;
        },

        // 提交拒绝审核
        async submitReject() {
            if (!this.rejectReason.trim()) {
                ElMessage.warning('请输入审核不通过的原因');
                return;
            }

            try {
                this.isLoading = true;
                const formData = new FormData();
                formData.append('auditId', this.currentAuditId);
                formData.append('pass', false);
                formData.append('reason', this.rejectReason);

                const res = await this.$post('/admin/audit/review', formData, {
                    headers: {
                        Authorization: "Bearer " + localStorage.getItem("teri_token"),
                    }
                });

                if (res.data.code === 0 || res.data.code === 200) {
                    ElMessage.success('审核已拒绝');
                    this.rejectDialogVisible = false;
                    this.getAuditResults(); // 刷新审核结果
                } else {
                    ElMessage.error(res.data.message || '操作失败');
                }
            } catch (error) {
                console.error("审核操作失败:", error);
                ElMessage.error('审核操作失败');
            } finally {
                this.isLoading = false;
            }
        },

        // 获取审核类型名称
        getAuditTypeName(type) {
            const typeMap = {
                1: '文本审核',
                2: '图片审核',
                3: '视频审核'
            };
            return typeMap[type] || '未知类型';
        },

        // 获取审核状态文本
        getStatusText(status) {
            const statusMap = {
                0: '审核中',
                1: 'AI审核通过',
                2: '需人工审核',
                3: 'AI判定违规',
                4: '人工审核通过',
                5: '人工审核不通过'
            };
            return statusMap[status] || '未知状态';
        },

        // 获取审核状态样式
        getStatusClass(status) {
            const classMap = {
                0: 'status-pending',
                1: 'status-pass',
                2: 'status-suspect',
                3: 'status-suspect',
                4: 'status-manual-pass',
                5: 'status-violation'
            };
            return classMap[status] || 'status-pending';
        },

        // 更新视频状态
        async updateVideoStatus(vstatus) {
            this.isLoading = true;
            try {
                const formData = new FormData();
                formData.append('vid', this.$route.params.vid);
                formData.append('status', vstatus);
                const res = await this.$post('/video/change/status', formData, {
                    headers: {
                        Authorization: "Bearer " + localStorage.getItem("teri_token"),
                    }
                });

                if (!res.data) {
                    ElMessage.error("操作失败，请稍后再试");
                    return;
                }

                if (res.data.code === 200) {
                    if (vstatus === 3) {
                        ElMessage.success("视频已删除");
                        this.$router.push('/review/video/form');
                    } else {
                        ElMessage.success(vstatus === 1 ? "视频已通过审核" : "视频已被驳回");
                        await this.getVideoDetail();
                    }
                } else {
                    ElMessage.error(res.data.message || "操作失败");
                }
            } catch (error) {
                console.error("更新视频状态失败:", error);
                ElMessage.error("操作失败，请稍后再试");
            } finally {
                this.isLoading = false;
            }
        },

        // 窗口大小改变时更新 player 的高度
        updatePlayerHeight() {
            // 使用CSS实现，不再需要JS控制
        },

        // 判断是否小窗
        changeWidth() {
            this.isMiniWidth = window.innerWidth < 480;
        },

        // 将文本中的链接格式化成超链接
        formatText(text) {
            return linkify(text || '');
        },

        // 删除前确认
        beforeDelete() {
            ElMessageBox.confirm(
                '该操作会永久删除视频源文件，无法恢复，确定要继续吗？',
                '永久删除确认',
                {
                    confirmButtonText: '确定删除',
                    cancelButtonText: '取消',
                    type: 'warning',
                    distinguishCancelAndClose: true,
                    confirmButtonClass: 'el-button--danger',
                }
            )
                .then(() => {
                    this.updateVideoStatus(3);
                })
                .catch(() => { })
        },

        // 从内容中提取人物信息
        extractPersonInfo(content) {
            if (!content) return '';
            const personMatch = content.match(/涉及人物: (.+?)(?:\n|$)/);
            return personMatch ? personMatch[1] : '';
        },

        // 格式化审核总结内容
        formatSummaryContent(content) {
            if (!content) return '';
            const resultMatch = content.match(/审核结果: (.+?)(?:\n|$)/);
            return resultMatch ? resultMatch[1] : content;
        },

        // 判断是否为违规帧
        isFrameViolation(detail) {
            if (!detail) return false;
            // 考虑值可能是数字的情况，转为字符串再比较
            const subType = String(detail.subType).toLowerCase();
            const detailType = String(detail.type).toLowerCase();
            return subType !== '合规' &&
                !subType.includes('合规') &&
                detailType !== '合规内容' &&
                !detailType.includes('合规');
        },

        // 从位置信息中提取时间点 - 用于详细时间显示
        extractDetailedTime(location) {
            if (!location) return '--';
            const timeMatch = location.match(/时间点: ([\d.]+)秒/);
            return timeMatch ? timeMatch[1] : '--';
        },

        // 是否有审核总结详情
        hasSummaryDetails(details) {
            if (!details || details.length === 0) return false;
            return details.some(detail => detail.subType === '审核总结');
        },

        // 获取审核总结详情
        getSummaryDetails(details) {
            if (!details || details.length === 0) return [];
            return details.filter(detail => detail.subType === '审核总结');
        },

        // 过滤帧数据
        filteredFrames(details) {
            if (!details || details.length === 0) return [];
            // 先过滤掉审核总结类型的详情
            const frames = details.filter(detail => detail.subType !== '审核总结');

            if (this.frameFilter === 'all') {
                return frames;
            } else if (this.frameFilter === 'violation') {
                return frames.filter(detail => this.isFrameViolation(detail));
            } else if (this.frameFilter === 'normal') {
                return frames.filter(detail => !this.isFrameViolation(detail));
            }
            return frames;
        },
    },
    computed: {
        // 根据审核结果计算视频是否有违规内容
        hasViolation() {
            if (!this.auditResults || this.auditResults.length === 0) return false;
            return this.auditResults.some(item => item.status === 3 || item.status === 5);
        }
    },
    async created() {
        this.changeWidth();
        await this.getVideoDetail();
    },
    mounted() {
        window.addEventListener('resize', this.changeWidth);
    },
    unmounted() {
        window.removeEventListener('resize', this.changeWidth);
    }
}
</script>

<style scoped>
/* 全局布局样式 */
.video-detail-container {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f7fa;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.main-content {
    padding-top: 24px;
    padding-bottom: 40px;
}

/* 主要内容布局 */
.content-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 24px;
    margin-bottom: 24px;
}

/* 视频播放器列 */
.video-player-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 视频信息列 */
.video-info-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 播放器样式 */
.player-wrapper {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background-color: #000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    position: relative;
}

.player-container {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    /* 16:9 宽高比 */
    position: relative;
}

.player-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.time-indicator {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 10;
    animation: pulse 1.5s infinite alternate;
}

@keyframes pulse {
    from {
        opacity: 0.9;
        transform: scale(1);
    }

    to {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* 卡片通用样式 */
.info-card {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.3s;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* 视频信息卡片 */
.video-info {
    padding: 24px;
    height: fit-content;
}

.info-header {
    margin-bottom: 24px;
}

.video-title {
    font-size: 22px;
    font-weight: 600;
    color: #303133;
    margin: 0 0 16px 0;
    line-height: 1.4;
}

.meta-info {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: #606266;
}

.upload-time,
.view-count {
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.info-row {
    display: flex;
    padding: 4px 0;
}

.info-label {
    flex: 0 0 70px;
    font-weight: 600;
    color: #303133;
}

.info-value {
    flex: 1;
    color: #606266;
}

.category-path {
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-tag {
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
    padding: 4px 10px;
    background-color: rgba(245, 34, 45, 0.08);
    border-radius: 4px;
    color: #f5222d;
    font-size: 12px;
    font-weight: 500;
}

.auth-tag i {
    margin-right: 4px;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-item {
    margin-right: 0;
    transition: all 0.2s;
}

.tag-item:hover {
    transform: translateY(-2px);
}

.no-tags {
    color: #909399;
    font-style: italic;
}

.description-row {
    align-items: flex-start;
}

.description-content {
    background-color: #f9f9f9;
    padding: 16px;
    border-radius: 8px;
    line-height: 1.6;
    max-height: 220px;
    overflow-y: auto;
    font-size: 14px;
    border: 1px solid #f0f0f0;
    transition: all 0.3s;
}

.description-content:hover {
    border-color: #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* 审核操作卡片 */
.action-card {
    padding: 24px;
}

.status-section {
    margin-bottom: 24px;
}

.status-card {
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 12px;
    background-color: #f9fafc;
    border: 1px solid #ebeef5;
    transition: all 0.3s;
}

.status-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.status-card.pending {
    background-color: #fffbe6;
    border-color: #ffe58f;
}

.status-card.success {
    background-color: #f6ffed;
    border-color: #b7eb8f;
}

.status-card.fail {
    background-color: #fff7e6;
    border-color: #ffd591;
}

.status-card.deleted {
    background-color: #f5f5f5;
    border-color: #e0e0e0;
}

.status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #fff;
    margin-right: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.status-card.pending .status-icon {
    color: #faad14;
}

.status-card.success .status-icon {
    color: #52c41a;
}

.status-card.fail .status-icon {
    color: #fa8c16;
}

.status-card.deleted .status-icon {
    color: #909399;
}

.status-icon .iconfont {
    font-size: 26px;
}

.status-info {
    flex: 1;
}

.status-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #303133;
}

.status-desc {
    font-size: 14px;
    color: #606266;
    line-height: 1.5;
}

.action-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.action-button {
    flex: 1;
    height: 44px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s;
}

.action-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 审核状态概览 */
.audit-overview {
    height: fit-content;
}

.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid #ebeef5;
    background-color: #fafafa;
}

.card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    display: flex;
    align-items: center;
    gap: 8px;
}

.audit-overview-content {
    padding: 20px;
}

.audit-status-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.audit-status-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background-color: #f9fafc;
    border-radius: 10px;
    transition: all 0.3s;
    border: 1px solid transparent;
}

.audit-status-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: #ebeef5;
}

.audit-type {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #303133;
}

.audit-type-icon {
    font-size: 18px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audit-status-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.status-pending {
    background-color: #e6f7ff;
    color: #1890ff;
}

.status-pass {
    background-color: #f6ffed;
    color: #52c41a;
}

.status-suspect {
    background-color: #fff7e6;
    color: #fa8c16;
}

.status-violation {
    background-color: #fff1f0;
    color: #f5222d;
}

.status-manual-pass {
    background-color: #f9f0ff;
    color: #722ed1;
}

.audit-status-badge.large {
    padding: 6px 12px;
    font-size: 14px;
}

.audit-time {
    font-size: 12px;
    color: #909399;
}

/* 审核详情部分 */
.audit-detail-section {
    margin-top: 24px;
}

.audit-detail-card {
    overflow: visible;
}

.audit-tab-header {
    display: flex;
    border-bottom: 1px solid #ebeef5;
    overflow-x: auto;
    scrollbar-width: thin;
    padding: 0 20px;
    background-color: #fafafa;
}

.audit-tab-header::-webkit-scrollbar {
    height: 4px;
}

.audit-tab-header::-webkit-scrollbar-thumb {
    background-color: #dcdfe6;
    border-radius: 4px;
}

.audit-tab-item {
    padding: 16px 20px;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #606266;
    transition: all 0.3s;
    border-bottom: 2px solid transparent;
}

.audit-tab-item:hover {
    color: #409eff;
    background-color: rgba(64, 158, 255, 0.04);
}

.audit-tab-item.active {
    color: #409eff;
    font-weight: 500;
    border-bottom-color: #409eff;
}

.tab-icon {
    font-size: 18px;
}

.tab-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.audit-tab-content {
    padding: 24px;
}

.audit-content-panel {
    animation: fadeIn 0.3s ease;
}

.audit-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.audit-type {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
}

.audit-panel-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.audit-info-card {
    background-color: #f9fafc;
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid #ebeef5;
}

.audit-info-item {
    display: flex;
    line-height: 1.6;
}

.audit-info-label {
    flex: 0 0 120px;
    font-weight: 500;
    color: #303133;
}

.audit-info-value {
    flex: 1;
    color: #606266;
}

/* 视频帧部分 */
.video-frames-section {
    margin-top: 20px;
    background-color: #f9fafc;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #ebeef5;
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ebeef5;
}

.video-frames-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.video-frame-card {
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
    cursor: pointer;
    border: 1px solid #ebeef5;
}

.video-frame-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.frame-thumbnail {
    position: relative;
    height: 120px;
    overflow: hidden;
}

.frame-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.video-frame-card:hover .frame-thumbnail img {
    transform: scale(1.05);
}

.frame-actions {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s;
}

.video-frame-card:hover .frame-actions {
    opacity: 1;
}

.frame-info {
    padding: 12px;
}

.frame-time {
    font-size: 12px;
    color: #606266;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.frame-result-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.audit-action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

/* 图片预览样式 */
.image-preview-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f7fa;
    border-radius: 8px;
    padding: 16px;
    min-height: 400px;
}

.preview-image {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.preview-info {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

.preview-location {
    font-size: 14px;
    color: #606266;
}

.preview-result {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
}

/* 拒绝原因对话框 */
.reject-dialog-content {
    margin-bottom: 16px;
}

.dialog-tip {
    margin-bottom: 12px;
    color: #606266;
}

/* 图标样式 */
.icon-text::before {
    content: "📝";
}

.icon-image::before {
    content: "🖼️";
}

.icon-video::before {
    content: "🎬";
}

/* 空状态卡片 */
.empty-audit-card {
    padding: 40px 0;
}

/* 响应式适配 */
@media (max-width: 1200px) {
    .content-layout {
        grid-template-columns: 1fr;
    }

    .video-info-column {
        order: 2;
    }

    .action-buttons {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }

    .action-buttons {
        grid-template-columns: 1fr;
    }

    .info-row {
        flex-direction: column;
        gap: 8px;
    }

    .info-label {
        flex: none;
    }

    .video-frames-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .audit-panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .audit-tab-item {
        padding: 12px 16px;
    }

    .card-title {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 12px;
    }

    .video-frames-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .audit-status-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .video-title {
        font-size: 18px;
    }

    .meta-info {
        flex-direction: column;
        gap: 8px;
    }

    .tab-text {
        display: none;
    }
}

/* 动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 审核总结样式 */
.audit-summary {
    margin-bottom: 20px;
    background-color: #f0f9ff;
    border-radius: 8px;
    padding: 16px;
    border-left: 4px solid #409eff;
}

.summary-title {
    font-weight: 600;
    color: #303133;
    margin-bottom: 12px;
}

.summary-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.summary-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.summary-type {
    font-weight: 500;
    color: #606266;
    background-color: rgba(64, 158, 255, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

.summary-message {
    color: #606266;
}

/* 帧过滤条 */
.frames-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #ebeef5;
}

.filter-info {
    font-size: 13px;
    color: #909399;
}

/* 帧违规信息 */
.frame-violation-info {
    font-size: 12px;
    color: #f56c6c;
    margin-top: 4px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 添加详细审核状态样式 */
.audit-status-details {
    margin-top: 16px;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 12px 16px;
    border: 1px solid #eaecef;
}

.audit-status-header {
    font-weight: 500;
    color: #303133;
    margin-bottom: 10px;
}

.audit-status-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.audit-status-item {
    display: flex;
    align-items: center;
}

.audit-type-label {
    min-width: 80px;
    font-size: 14px;
    color: #606266;
}

.audit-status-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .audit-status-items {
        flex-direction: column;
    }
}
</style>